<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/datepicker/jquery-calendar.js"></script>
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/datepicker/jquery-calendar.css" />


		<script type="text/javascript">

		//<![CDATA[

			$(document).ready(function (){ 

				$("#calendar1, #calendar2").calendar();

				$("#calendar1_alert").click(function(){alert(popUpCal.parseDate($('#calendar1').val()))});

			});

		//]]>

		</script>
<div class="page">   
<div class="slideshow1">
      <ul class="rslides">
        <li><img src="<?php echo base_url(); ?>assets/img/images-1.jpg" /></li>
      </ul>
    </div>  
<div class="quick-search">	

        <form class="disana" action="<?php echo site_url('timeline/cari/') ?>" method="GET">
        	<div class="disini1">
        		<div class="span3"><h5>CARI PERJALANAN</h5></div>
        	</div>
          <div class="disini">          
          <!-- <div class="row span12">
          	&nbsp; -->
          	
            <div class="row span4">
              <!-- <input type="text" name="dari" value="" placeholder="Dari" style="margin-top:20px;"/> -->
              <div class="input-prepend" style="margin-top:20px;">
					<span class="add-on"><i class="icon-map-marker"></i></span>
					<input class="span3" id="prependedInput" type="text" name="dari" placeholder="dari">
				</div>
            </div>
        <!-- </div> -->
        <!-- <div class="row"> -->
            <div class="span3">
              <!-- <input type="text" name="ke" value="" placeholder="Ke" /> -->
              	<div class="input-prepend">
					<span class="add-on"><i class="icon-map-marker"></i></span>
					<input class="span3" id="prependedInput" type="text" name="ke"placeholder="ke">
				</div>
            </div>
            <div class="span3">            	
              <!-- <input type="date" name="departTime" value="" placeholder="berangkat" /> -->
              <div class="input-prepend">
					<span class="add-on"><i class="icon-time"></i></span>
					<!-- <input class="span3" id="prependedInput" type="date" name="departTime" placeholder="berangkat"> -->
					
	<input type="text" id="calendar1" class="calendarFocus span3"/>
				</div>
             
            </div>
            <div class="span3 offset2" style="margin-left:160px;">
              <input type="submit" name="" class="btn btn-warning span2" value="CARI" placeholder="berangkat" />
            </div>
        <!-- </div> -->
            <!-- <div class="row">                
                <div class="span3 offset1">
                    <input type="submit" value="CARI" class="btn btn-primary" />
                </div>
            </div><br/> -->
          </div>
        </form>
        
    </div>   
    <div class="container">
        <div class="span10" style="margin-top:20px;">
   <script type="text/javascript">
   var timelinePNum = -1;
   var timelineUNum = -1;
   var refreshRate = 5000;
   function generateTimelineItem(data) {
	   var ret = "";
	   var size = data.length;
	   for (var i=0;i<size;i++) {
		   var status = data[i]['status'];
		   var id = data[i]['id'];
		   var userId = data[i]['userId'];
		   var name = data[i]['name'];
		   var src = data[i]['source_label'];
		   var dst = data[i]['destination_label'];
		   var via = (data[i]['via']?data[i]['via']:"-");
		   var avatar = (data[i]['avatar']?"<?php echo base_url()?>avatar/thumb/" + data[i]['avatar']:"<?php echo base_url()?>assets/img/person.jpg");

		   var departTime = data[i]['departTime'];
		   var priceInRupiah = (data[i]['priceInRupiah']?data[i]['priceInRupiah']:"-");
		   var priceInPoint = (data[i]['priceInPoint']?data[i]['priceInPoint']:"-");

		   if(priceInRupiah>1000){
		   	priceInRupiah = priceInRupiah/1000 + " ribu";
		   } else if(priceInRupiah==0){
		   	priceInRupiah = priceInRupiah + " ribu";
		   }

		   ret = ret + "<div id=\"" + status + id + "\">";
		   ret = ret + "<a href=\"<?php echo site_url().'profil/detail/'?>"  + userId + "\">";
		   ret = ret + "<div class=\"row-fluid span12 thumbnail\" id=\"profil-side\">";
		   ret = ret + "<div class=\"span2\">";
		   ret = ret + "<div class=\"thumbnail ava\">";
		   ret = ret + "<img data-src=\"<?php echo base_url().'assets/js/holder.js/160x120'?>\" src=\""+ avatar + "\" class=\"\" onerror=\"this.src='<?php echo base_url();?>assets/img/person.jpg'\">";
		   ret = ret + "</div></div><div class=\"span8\">";
		   ret = ret + "<strong>" + src + " -> " + dst + "</strong><br/>";
		   ret = ret + "via " + via + "<br/>";
		   ret = ret + name + ", " + departTime + "</div>";
		   ret = ret + "<div class=\"span2\">";
		   ret = ret  + priceInRupiah+ "<br/>" + priceInPoint + " poin";
		   ret = ret + "</div><br/></div></a></div>";
	   }
	   return ret;
   }
   function updateTimeline(arg) {
	   $.ajax({
		   url:"http://localhost/ojexcom/index.php/home/get_timeline/"+ arg,
		   dataType:"json",
		   beforeSend:function(){
			   $("#timeline" + arg).hide();
			   $("#loading" + arg).show();
		   },
		   success:function(result) {
			   var data = result['timeline'];
			   var containerId = '#timeline' + arg;
			   var htmlVal = generateTimelineItem(data);
			   $(containerId).html(htmlVal);
			   $(containerId).children('div').each(function(){$(this).fadeIn(2000)});
		   },
		   complete:function(){
			   $("#timeline" + arg).show();
			   $("#loading" + arg).hide();
		   }
	   });
   }
   function refreshTimeline() {
	   $.ajax({
		   url:"http://localhost/ojexcom/index.php/home/countTimeline",
		   dataType:"json",
		   success:function(result) {
			   var p = result['P'];
			   var u = result['U'];
			   if (timelinePNum != p) {
				   timelinePNum = p;
				   updateTimeline('P');
			   }
			   if (timelineUNum != u) {
				   timelineUNum = u;
				   updateTimeline('U');
			   }
			   },
		   complete:function(){
			   setTimeout(refreshTimeline,refreshRate);
		   }
	   });
	}
	refreshTimeline();
    
</script>
<div class="row-fluid span12">	
  <div class=""><h5>PERJALANAN TERBARU</h5></div>
                      </div>
<div class="row-fluid span12">
<div class="span6" id="timeline-content">
    <div class="row-fluid span12">
                        <strong>PENGEMUDI</strong><br/>
                      </div>
                      
<div id="loadingP" class="row-fluid span12">
<img class="img" src="<?php echo base_url(); ?>/assets/img/loading.gif" style="display: block; margin-left: auto; margin-right:auto">
</div>
<div id="timelineP">
</div>
</div>
<div class="span6">
<div class="row-fluid span12">
                        <strong>PENUMPANG</strong><br/>
                      </div>
<div id="loadingU" class="row-fluid span12">
<img class="img" src="<?php echo base_url(); ?>/assets/img/loading.gif" style="display: block; margin-left: auto; margin-right:auto">
</div>
<div id="timelineU">
</div>
</div>
</div>
</div>
</div><br/>
</div>

